<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>动态路由匹配-高级匹配模式</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="generator" content="GitBook 3.2.2">
    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
<div id="app1">
	高级匹配模式
</div>
    <script type="text/javascript">
    // The matching uses path-to-regexp, which is the matching engine used
    // by express as well, so the same matching rules apply.
    // For detailed rules, see https://github.com/pillarjs/path-to-regexp
    const router = new VueRouter({
        mode: 'history',
        // base: __dirname,
        routes: [{
                path: '/'
            },
            // params are denoted with a colon ":"
            {
                path: '/params/:foo/:bar'
            },
            // a param can be made optional by adding "?"
            {
                path: '/optional-params/:foo?'
            },
            // a param can be followed by a regex pattern in parens
            // this route will only be matched if :id is all numbers
            {
                path: '/params-with-regex/:id(\\d+)'
            },
            // asterisk can match anything
            {
                path: '/asterisk/*'
            },
            // make part of th path optional by wrapping with parens and add "?"
            {
                path: '/optional-group/(foo/)?bar'
            }
        ]
    })




    new Vue({
        router,
        template: `
    <div id="app">
      <h1>Route Matching</h1>
      <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/params/foo/bar">/params/foo/bar</router-link></li>
        <li><router-link to="/optional-params">/optional-params</router-link></li>
        <li><router-link to="/optional-params/foo">/optional-params/foo</router-link></li>
        <li><router-link to="/params-with-regex/123">/params-with-regex/123</router-link></li>
        <li><router-link to="/params-with-regex/abc">/params-with-regex/abc</router-link></li>
        <li><router-link to="/asterisk/foo">/asterisk/foo</router-link></li>
        <li><router-link to="/asterisk/foo/bar">/asterisk/foo/bar</router-link></li>
        <li><router-link to="/optional-group/bar">/optional-group/bar</router-link></li>
        <li><router-link to="/optional-group/foo/bar">/optional-group/foo/bar</router-link></li>
      </ul>
      <p>Route context</p>
      <pre>{{ JSON.stringify($route, null, 2) }}</pre>
    </div>
  `
    }).$mount('#app1')
    </script>
</body>

</html>
